<template>
    <div class="plugin-container">
        <div class="plugin-box"
            :style="{ 'left': props.show ? '0' : '-436px', 'opacity': props.show ? '1' : '0', 'transition': 'all 1s' }">
            <div class="plugin-box-inner-wrapper">
                <!-- 车辆概况分布 -->
                <div class="header">
                    <img src="@/assets/dataIndex/arrow_right.png" alt="">
                    <span class="pointer">车辆概况分布</span>
                </div>

                <div class="overviewData_content">
                    <div class="overviewData_item">
                        <img :src="require(`@/assets/dataIndex/overview_num.png`)" alt="">
                        <div class="pointer">
                            <span class="label">投入运营</span>
                            <span class="num">{{ props.leftData1.optCount }}</span>
                        </div>
                    </div>
                    <div class="overviewData_item">
                        <img :src="require(`@/assets/dataIndex/overview_num.png`)" alt="">
                        <div class="pointer">
                            <span class="label">正常/故障</span>
                            <span class="num">{{ props.leftData1.normalCount }} / {{ props.leftData1.errorCount
                                }}</span>
                        </div>
                    </div>
                    <div class="overviewData_item">
                        <img :src="require(`@/assets/dataIndex/overview_num.png`)" alt="">
                        <div class="pointer">
                            <span class="label">在/离线</span>
                            <span class="num">{{ props.leftData1.onlineCount }} / {{ props.leftData1.offlineCount
                                }}</span>
                        </div>
                    </div>
                    <div class="overviewData_item">
                        <img :src="require(`@/assets/dataIndex/overview_num.png`)" alt="">
                        <div class="pointer">
                            <span class="label">行驶/静止</span>
                            <span class="num">{{ props.leftData1.drivingCount }} / {{ props.leftData1.stopCount
                                }}</span>
                        </div>
                    </div>
                </div>
                <!-- 车型分布 -->
                <div class="header">
                    <img src="@/assets/dataIndex/arrow_right.png" alt="">
                    <span class="pointer" style="flex:1">车型分布</span>
                    <div class="tab_box">
                        <span class="active_span">全部</span>
                        <span  class="">接入</span>
                    </div>
                </div>
                <!--设备运行饼状图-->
                <div class="operation-content">
                    <div class="operation_charts_box">

                        <div class="operation_charts" id="operation_charts"></div>
                    </div>

                </div>
                <!-- 企业入驻排行 -->
                <div class="header videoMonitor-header">
                    <img src="@/assets/dataIndex/arrow_right.png" alt="">
                    <span class="pointer">企业入驻排行</span>

                </div>
                <div class="ranking-list">
                    <div class="list_title">
                        <span class="ranking">
                            <span>排名</span>

                        </span>
                        <span class="name">运营企业</span>
                        <span class="num">接入车数</span>
                        <span class="deviceNum">运营线路</span>
                    </div>
                    <div class="list_item_box">
                        <div class="list_item" v-for="(item, index) in props.leftData3" :key="index">
                            <span class="ranking">
                                <span class="ranking_span" :class="`ranking_span_${index}`">{{ index + 1 }}</span>
                            </span>
                            <span class="name">{{ item.manufacturerName }}</span>
                            <span class="num">{{ item.count }}</span>

                            <span class="deviceNum">{{ item.lineCount }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted, onUnmounted, reactive, watch, defineEmits } from 'vue';

import { message } from "ant-design-vue";
// import { useStore } from "vuex";
import { useRouter } from "vue-router";
// import { queryStatistics } from "@/service/oilField";
const router = useRouter()
const emit = defineEmits(['getAlarmData'])
// const store = useStore()
const props = defineProps({
    show: {
        type: Boolean,
        default: true
    },
    //第1个 车辆概况分布
    leftData1: {
        type: Object,
        default: () => { }
    },
    //第2个 车型分布
    leftData2: {
        type: Array,
        default: () => []
    },
    //第3个 企业入驻排行
    leftData3: {
        type: Object,
        default: () => { }
    },

})

const state = reactive({
    colorArr1: [
        new echarts.graphic.LinearGradient(0, 1, 1, 1,
            [{
                offset: 0,
                color: "#00D4FF" // 0% 处的颜色
            },
            {
                offset: 1,
                color: "#007AD9" // 100% 处的颜色
            }]), new echarts.graphic.LinearGradient(0, 1, 1, 1,
                [{
                    offset: 0,
                    color: "#FF4F49" // 0% 处的颜色
                },
                {
                    offset: 1,
                    color: "#DD1113" // 100% 处的颜色
                }]),
        new echarts.graphic.LinearGradient(0, 1, 1, 1,
            [{
                offset: 0,
                color: "#00D6B1" // 0% 处的颜色
            },
            {
                offset: 1,
                color: "#00A84C" // 100% 处的颜色
            }]),
        new echarts.graphic.LinearGradient(0, 1, 1, 1,
            [{
                offset: 0,
                color: "#FFBF4E" // 0% 处的颜色
            },
            {
                offset: 1,
                color: "#FFE256" // 100% 处的颜色
            }])
    ],
    colorArrText1: [
        'linear-gradient( 180deg, #00D4FF 0%, #007AD9 100%)',
        'linear-gradient( 180deg, #FF4F49 0%, #DD1113 100%)',
        'linear-gradient( 180deg, #00D6B1 0%, #00A84C 100%)',
        'linear-gradient( 140deg, #FFBF4E 0%, #FFE256 100%)'
    ],
    colorArr2: ['#FC484D', '#FF8532', '#FFC132', '#FF8532', '#32F8FF', '#EBFF32', '#71FF32', '#0036F8'],
    colorArrText2: ['#FC484D', '#FF8532', '#FFC132', '#FF8532', '#32F8FF', '#EBFF32', '#71FF32', '#0036F8'],
    selectDeviceType: 1,
    warnLever: '',
    warnLeverList: [{}, {}]
})

// 设备运行饼状图
const setOperationCharts = (chartData) => {
    console.log(chartData, 'chartData')
    let chartDom = document.getElementById('operation_charts');
    if (!chartDom) {
        setTimeout(() => {
            setOperationCharts(chartData)
        }, 200)
        return
    }
    let myChart = echarts.init(chartDom);
    if (!chartData) {
        if (myChart) {
            myChart.dispose();
        }
        return;
    }

    myChart = echarts.init(chartDom);
    let colorArr = [
        ['#15EFE6', '#60BBFF'],
        ['#FFBF4E', '#FFE256'], 
        ['#FF4F49', '#DD1113'], 
        ['#00D4FF', '#007AD9']
    ]
    colorArr = colorArr.map(r=>{
        return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
                offset: 0,
                color: r[0]
            },
            {
                offset: 1,
                color: r[1]
            }
        ])
    })
    let option = {
        grid: {
            left: '10%',
            right: '2%',
            bottom: '10%',
            top: '10%'
        },
        tooltip: {
            formatter: "{b0}: {c0}",
            borderWidth: 0,
            backgroundColor: 'rgba(255, 255, 255, 0.9)',
            textStyle: {
                color: "#000"
            }
        },
        // color: colorArr,
        legend: {
            show: true,
            orient: 'vertical', // 竖排
            left: 'right',      // 靠右
            top: 'center',      // 垂直居中
            textStyle: {
                color: "#fff"
            }
        },

        series: [
            {
                name: '无数据',
                // showEmptyCircle:false,
                emptyCircleStyle: {
                    color: '#42dcda'
                },
                type: 'pie',
                minAngle: 5,
                //   调整大小  内径 外径
                // radius: ['100%', '0%'],

                // top:'10%',
                // top:0,
                center: ['40%', '50%'],
                //   label: {
                //     show: false,
                //     position: 'center'
                //   },
                // 线就是label
                label: {
                    show: false,
                    // color: "#fff"
                },
                // labelLine: {
                //     lineStyle: {
                //         color: "#fff"
                //     }
                // },
                color: colorArr,
                emphasis: {
                    label: {
                        show: false,
                        // alignTo:'labelLine',
                        // alignTo:'edge',
                        // overflow: 'break',
                        // overflow: 'breakAll',
                        // margin: 0,
                        // color: props.propColor || "#fff",
                        // fontSize: 18,
                        // width: 90,
                        // // width:90,
                        // formatter: function (params) {
                        //     return params.data;
                        // }
                    },
                    labelLine: {
                        lineStyle: {
                            color: props.propColor || "#fff",
                            width: 2
                        }
                    },
                },
                data: chartData.map(item => {
                    return {
                        value: item.count,
                        name: item.vehicleTypeName
                    }
                })
            }
        ]
    };
    option && myChart.setOption(option);
}
const init = () => {
    let chartDom = document.getElementById(props.chartData.domId);
    let myChart = echarts.init(chartDom);
    let colorArr = [
        ['#15EFE6', '#60BBFF'], ['#2868E5', '#2651FF'],
        ['#FFBF4E', '#FFE256'], ['#FF4F49', '#DD1113']
    ]
    colorArr = props.chartData.colorArr.map(r => {
        return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
                offset: 0,
                color: r[0]
            },
            {
                offset: 1,
                color: r[1]
            }
        ])
    })
    let option = {
        tooltip: {
            formatter: "{b0}: {c0}",
            borderWidth: 0,
            backgroundColor: 'rgba(255, 255, 255, 0.9)',
            textStyle: {
                color: "#000"
            }
        },
        series: [
            {
                emphasis: {
                    scale: true,
                    scaleSize: 10,
                },
                name: 'Access From11',
                type: 'pie',
                radius: ['45%', '65%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                color: colorArr,
                data: props.chartData.seriesData
            }
        ]
    };
    option && myChart.setOption(option);
}

onMounted(() => {


})
onUnmounted(() => {

})




watch(() => props.leftData2, () => {
    setOperationCharts(props.leftData2)
}, { deep: true })
// watch(() => props.alarmData, () => {
//     state.warnLeverList = props.alarmData.alarmCtTopList
// }, {deep: true})


</script>


<style lang="less" scoped>
.plugin-container {
    .plugin-box {
        position: fixed;
        z-index: 8;
        width: 436px;
        opacity: 0.9;
        height: calc(100vh - 72px);
        left: 0;
        top: 85px;
        background: #030635 url("@/assets/dataIndex/factory_left_bg.png") no-repeat;
        background-size: 100% 100%;
        padding: 22px 8px 22px 22px;

        .plugin-box-inner-wrapper {
            width: 100%;
            height: 100%;
            color: #fff;
            padding-right: 10px;
            overflow-y: scroll;

            .top_header {
                width: 276px;
                padding: 10px 16px;
                background: linear-gradient(270deg, rgba(0, 145, 255, 0) 0%, rgba(0, 145, 255, 0.62) 100%);
                margin-top: 20px;
                border-radius: 8px;
                font-weight: 600;
                font-size: 18px;
                color: #FFFFFF;
                line-height: 18px;
            }

            .header {
                display: flex;
                align-items: center;
                font-size: 20px;
                font-family: PingFangSC-Semibold, PingFang SC, serif;
                font-weight: 600;
                color: #FFFFFF;
                height: 40px;
                background: url("@/assets/dataIndex/home_item_title.png") no-repeat bottom left;
                background-size: 355px 20px;
                margin-top: 20px;

                img {
                    width: 13px;
                    height: 14px;
                    margin-right: 6px;
                }

                // .tab_box {
                //     align-self: flex-end;
                //     width: 140px;
                //     height: 24px;
                //     background: rgba(1, 19, 84, 0.66);
                //     box-shadow: inset 0 0 8px 0 rgba(84, 177, 255, 0.75);
                //     border-radius: 4px;
                //     display: flex;
                //     overflow: hidden;

                //     span {
                //         width: 50%;
                //         height: 100%;
                //         font-weight: 400;
                //         font-size: 12px;
                //         color: #FFFFFF;
                //         display: flex;
                //         align-items: center;
                //         justify-content: center;
                //         cursor: pointer;
                //     }

                //     .active_span {
                //         background: #006EFF;
                //     }
                // }
            }

            .overviewData_content {
                margin: 22px 0 0 0;
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;

                .overviewData_item {
                    // flex: 0.5;
                    flex-basis: 48%;
                    width: 80px;
                    height: 80px;
                    display: flex;
                    align-items: center;
                    justify-content: space-around;
                    position: relative;
                    text-align: center;
                    margin-bottom: 10px;

                    img {
                        width: 80px;
                        height: 80px;
                    }

                    .pointer {
                        position: absolute;
                        top: 0;
                        left: 50%;
                        transform: translateX(-50%);
                        width: 100px;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        font-weight: 600;
                        font-size: 14px;
                        color: #00CCCC;
                        line-height: 14px;

                        .num {
                            font-weight: 900;
                            font-size: 18px;
                            color: #FFFFFF;
                            line-height: 18px;
                            margin-top: 8px;
                        }
                    }
                }
            }

            .overviewData_content2 {
                justify-content: space-around;
            }

            .station_data_content {
                margin: 18px 0 10px 0;
                display: flex;
                flex-direction: column;

                .title {
                    color: rgb(0, 184, 224);
                    font-size: 20px;
                    line-height: 20px;
                    font-weight: bold;
                }

                div {
                    margin-bottom: 10px;
                }

                .businessDirection {
                    max-height: 70px;
                    overflow-y: scroll;

                    &::-webkit-scrollbar-thumb {
                        /*滚动条里面小方块*/
                        background-color: #1A3183;
                        border-radius: 4px;
                    }

                    // 滚动条
                    &::-webkit-scrollbar-track {
                        /*外层轨道*/
                        border: none;
                        background: transparent;
                    }

                    &::-webkit-scrollbar {
                        /*滚动条整体样式*/
                        width: 4px;
                        /*高宽分别对应横竖滚动条的尺寸*/
                        height: 2px;
                        background: transparent;
                    }
                }
            }

            .operation-content {
                margin: 10px 0;
                position: relative;

                .text_y {
                    position: absolute;
                    top: 4px;
                    left: 36px;
                    color: #889EE3;
                    font-size: 12px;
                }

                .text_x {
                    position: absolute;
                    bottom: 2px;
                    right: 0;
                    color: #889EE3;
                    font-size: 12px;
                }

                .title_box {
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;

                    .title_item {
                        display: flex;
                        align-items: center;
                        margin-right: 8px;

                        .color_span {
                            width: 10px;
                            height: 10px;
                            border-radius: 3px;
                            margin-right: 4px;
                        }

                        .label_span {
                            font-weight: 400;
                            font-size: 12px;
                            line-height: 12px;
                            color: #889EE3;
                        }
                    }
                }

                .operation_charts_box {
                    margin: 10px 0;
                    position: relative;
                    height: 246px;

                    .operation_charts {
                        position: absolute;
                        left: 0;
                        top: 0;
                        z-index: 1;
                        width: 100%;
                        height: 246px;
                    }

                    .num_box {
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        display: flex;
                        flex-direction: column;
                        color: #fff;
                        text-align: center;
                        font-size: 16px;

                        .num {
                            font-weight: 900;
                            font-size: 24px;
                            line-height: 24px;
                            margin-top: 5px;
                        }
                    }

                    .round1 {
                        z-index: 0;
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%, -50%);
                        width: 246px;
                        height: 246px;
                        border-radius: 50%;
                        border: 1px solid #4B6F9D;
                    }

                    .round2 {
                        z-index: 0;
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%, -50%);
                        width: 126px;
                        height: 126px;
                        border-radius: 50%;
                        border: 1px solid #4B6F9D;
                    }
                }

            }

            .operation-table {
                width: 100%;
                margin-bottom: 14px;
            }

            .videoMonitor-header {
                position: relative;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .pointer {
                    flex: 1;
                }

                :deep(.sinopec-select-selector) {
                    background: rgba(1, 19, 84, 0.35);
                    box-shadow: inset 0px 0px 8px 0px rgba(84, 177, 255, 0.75);
                    color: #fff;
                    border-color: transparent;
                    border-radius: 4px;
                    font-size: 12px;
                    border: 1px solid #005CA9;
                }

                :deep(.sinopec-select-arrow) {
                    color: #fff;
                }
            }

            .ranking-list {
                flex: 1;
                display: flex;
                flex-direction: column;

                .list_title,
                .list_item {
                    background: url("@/assets/dataIndex/title_bg.png") no-repeat;
                    background-size: 100% 100%;
                    display: flex;
                    height: 32px;
                    margin-top: 12px;
                    align-items: center;
                    justify-content: space-between;
                    padding: 0 12px 0 20px;
                    font-weight: 600;
                    font-size: 12px;
                    color: #00CCCC;
                    line-height: 12px;

                    .ranking {
                        width: 50px;
                    }

                    .name {
                        width: 130px;
                    }

                    .num {
                        width: 60px;
                    }

                    .deviceNum {
                        width: 60px;
                    }
                }

                .list_title {
                    margin: 12px 0 0;

                    .ranking {
                        display: flex;
                        align-items: center;
                        cursor: pointer;

                        img {
                            width: 16px;
                            height: 16px;
                        }
                    }
                }

                .list_item_box {
                    display: flex;
                    flex-direction: column;

                    .list_item {
                        height: 50px;
                        margin-top: 0;
                        padding-bottom: 4px;
                        background: url("@/assets/dataIndex/rank-bg.png") no-repeat bottom center;
                        background-size: calc(100% - 12px) 14px;
                        transition: all 0.2s;
                        cursor: pointer;

                        &:hover {
                            background-size: 100% 14px;
                        }

                        span {
                            height: 100%;
                            display: flex;
                            align-items: flex-end;
                            padding-bottom: 4px;
                            color: #FFFFFF;
                            font-weight: normal;
                        }

                        .ranking {
                            padding-bottom: 0;
                            padding-left: 2px;

                            img {
                                width: 20px;
                                height: 20px;
                            }

                            .ranking_span {
                                width: 26px;
                                height: 18px;
                                box-sizing: border-box;
                                overflow: hidden;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                box-shadow: inset 0 0 8px 0 #1A84CE;
                                border: 1px solid rgba(0, 138, 225, 1);
                                background: linear-gradient(to bottom, rgba(0, 69, 122, 0) 0%, #00457A 2%, #008AE1 100%);
                                font-weight: 900;
                                font-size: 10px;
                                line-height: 10px;
                                border-radius: 4px;
                                transform: translateX(-3px);
                                padding-bottom: 0;
                            }

                            .ranking_span_0 {
                                background: linear-gradient(rgba(182, 112, 0, 0) 0%, #FF9C00 100%);
                                box-shadow: inset 0px 0px 8px 0px rgba(254, 189, 45, 0.8);
                                border: none;
                            }

                            .ranking_span_1 {
                                background: linear-gradient(rgba(30, 153, 42, 0) 0%, #3AB34E 100%);
                                box-shadow: inset 0px 0px 8px 0px #23CC40;
                                border: none;
                            }

                            .ranking_span_2 {
                                background: linear-gradient(#4B0405 0%, #C52A2B 100%);
                                box-shadow: inset 0px 0px 8px 0px rgba(255, 109, 109, 0.8);
                                border: none;
                            }
                        }
                    }
                }
            }
        }

        // 滚动条
        .plugin-box-inner-wrapper::-webkit-scrollbar-track {
            /*外层轨道*/
            border: none;
            background: transparent;
        }

        .plugin-box-inner-wrapper::-webkit-scrollbar {
            /*滚动条整体样式*/
            width: 4px;
            /*高宽分别对应横竖滚动条的尺寸*/
            height: 2px;
            background: transparent;
        }

        .plugin-box-inner-wrapper::-webkit-scrollbar-thumb {
            /*滚动条里面小方块*/
            background-color: #1A3183;
            border-radius: 4px;
        }
    }
    .tab_box{
        align-self: flex-end;
        width: 140px;
        height: 24px;
        background: rgba(1, 19, 84, .66);
        box-shadow: inset 0 0 8px 0 #00CCCC;
        border-radius: 4px;
        display: flex;
        overflow: hidden;
        .active_span{
            background: rgba(0, 204, 204,.8);
        }
        span{
            width: 50%;
            height: 100%;
            font-weight: 400;
            font-size: 12px;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
    }
}
</style>
